<!DOCTYPE html>
<html lang="zh-cn">
<head prefix="og: http://ogp.me/ns#">
  <meta charset="utf-8">
  <title>react-axios|axios中文网 | axios</title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Canonical links -->
  <link rel="canonical" href="http://axios-js.com/zh-cn/docs/react-axios.html">
  <!-- Alternative links -->
  
    
      <link rel="alternative" hreflang="en" href="http://axios-js.com/docs/react-axios.html">
    
      <link rel="alternative" hreflang="zh-cn" href="http://axios-js.com/zh-cn/docs/react-axios.html">
    
  
  <!-- Icon -->
  <link rel="apple-touch-icon" sizes="57x57" href="http://www.axios-js.com/icon/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="114x114" href="http://www.axios-js.com/icon/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="72x72" href="http://www.axios-js.com/icon/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="144x144" href="http://www.axios-js.com/icon/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="60x60" href="http://www.axios-js.com/icon/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="120x120" href="http://www.axios-js.com/icon/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="76x76" href="http://www.axios-js.com/icon/apple-touch-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="152x152" href="http://www.axios-js.com/icon/apple-touch-icon-152x152.png">
  <link rel="icon" type="image/png" href="http://www.axios-js.com/icon/favicon-196x196.png" sizes="196x196">
  <link rel="icon" type="image/png" href="http://www.axios-js.com/icon/favicon-160x160.png" sizes="160x160">
  <link rel="icon" type="image/png" href="http://www.axios-js.com/icon/favicon-96x96.png" sizes="96x96">
  <link rel="icon" type="image/png" href="http://www.axios-js.com/icon/favicon-16x16.png" sizes="16x16">
  <link rel="icon" type="image/png" href="http://www.axios-js.com/icon/favicon-32x32.png" sizes="32x32">
  <meta name="msapplication-TileColor" content="#2f83cd">
  <meta name="msapplication-TileImage" content="/icon/mstile-144x144.png">
  <meta name="generator" content="Hexo 4.1.0">
  <!-- CSS -->
  <!-- build:css build/css/navy.css -->
  
<link rel="stylesheet" href="static/css/navy.css">

  <!-- endbuild -->
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/font-awesome.min.css">
  <link rel="stylesheet" href="static/css/docsearch.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
  <!-- RSS -->
  <link rel="alternate" href="http://www.axios-js.com/atom.xml" title="axios">
  <!-- Open Graph -->
  <meta name="description" content="react-axios中文文档">
<meta property="og:type" content="website">
<meta property="og:title" content="react-axios|axios中文网">
<meta property="og:url" content="http://axios-js.com/zh-cn/docs/react-axios.html">
<meta property="og:site_name" content="axios">
<meta property="og:description" content="react-axios中文文档">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://img.shields.io/npm/v/react-axios.svg">
<meta property="og:image" content="https://travis-ci.org/sheaivey/react-axios.svg?branch=master">
<meta property="og:image" content="https://img.shields.io/npm/l/react-axios.svg">
<meta property="og:image" content="https://img.shields.io/npm/dt/react-axios.svg">
<meta property="og:image" content="https://res.cloudinary.com/dq9x329zv/image/upload/v1589976968/853a7860-8d0d-4c00-9d55-75ae4bb8e3f4_euxax7.jpg">
<meta property="og:image" content="http://axios-js.com/icon/les01.jpeg">
<meta property="og:image" content="http://axios-js.com/icon/les02.jpeg">
<meta property="og:image" content="http://axios-js.com/icon/les03.jpeg">
<meta property="og:image" content="http://axios-js.com/icon/les04.jpeg">
<meta property="article:published_time" content="2021-10-28T14:07:29.000Z">
<meta property="article:modified_time" content="2021-10-28T14:07:29.000Z">
<meta property="article:author" content="Hexo">
<meta property="article:tag" content="axios 中文">
<meta property="article:tag" content=" axios 中文文档">
<meta property="article:tag" content=" react-axios中文">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://img.shields.io/npm/v/react-axios.svg">
  <!-- Analytics -->
  
<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:1120304,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

<a title="Real Time Web Analytics" href="javascript:;" target="_blank" rel="noopener"><img src="static/picture/badge.gif" border="0"></a>
<script>var clicky_site_ids = clicky_site_ids || []; clicky_site_ids.push(101192693);</script>
<script async="" src="static/js/js.js"></script>



</head>

<body>
  <div id="container">
    <header id="header" class="wrapper">
  <div id="header-inner" class="inner">
    <h1 id="logo-wrap">
      <a href="index.html" id="logo">axios</a>
    </h1>
    <nav id="main-nav">
      <a href="index1.html" class="main-nav-link">文档</a><a href="index2.html" class="main-nav-link">博客</a>
      <a href="javascript:;" target="_blank" rel="noopener" class="main-nav-link"><i class="fa fa-github-alt"></i></a>
      <div id="search-input-wrap">
        <div id="search-input-icon">
          <i class="fa fa-search"></i>
        </div>
        <input type="search" id="search-input" placeholder="Search...">
      </div>
    </nav>
    <div id="lang-select-wrap">
      <label id="lang-select-label"><i class="fa fa-globe"></i><span>简体中文</span></label>
      <select id="lang-select" data-canonical="docs/react-axios.html">
        
          <option value="en">undefined</option>
        
          <option value="zh-cn" selected="">简体中文</option>
        
      </select>
    </div>
    <a id="mobile-nav-toggle">
      <span class="mobile-nav-toggle-bar"></span>
      <span class="mobile-nav-toggle-bar"></span>
      <span class="mobile-nav-toggle-bar"></span>
    </a>
  </div>
</header>

    <div id="content-wrap">
  <div id="content" class="wrapper">
    <div id="content-inner">
      <article class="article-container" itemscope="" itemtype="http://schema.org/Article">
        <div class="article-inner">
          <div class="article">
            <div class="inner">
              <header class="article-header">
                <h1 class="article-title" itemprop="name">react-axios|axios中文网</h1>
                <a href="javascript:;" target="_blank" rel="noopener" class="article-edit-link" title="改进本文"></a>
              </header>
              <div class="article-content" itemprop="articleBody">
                <p class="vultr-desc">
                  本站由axios爱好者共建，部署在vultr vps上，推荐使用vultr!价格实惠，实力雄厚。
                  最近新注册用户充值$25,可额外获赠$50,搭建博客必备。
                  <a href="javascript:;" target="_blank" rel="noopener">前往注册</a>
                </p>

                <div id="lagou-vip">
                  <a href="javascript:;" target="_blank" rel="noopener">京东双11，现在不买等一年！犒劳自己--></a>
                </div>
                <p><a href="javascript:;" target="_blank" rel="noopener"><img src="static/picture/react-axios.svg" alt="npm"></a><br><a href="javascript:;" target="_blank" rel="noopener"><img src="static/picture/react-axios1.svg" alt="Build Status"></a><br><a href="javascript:;" target="_blank" rel="noopener"><img src="static/picture/react-axios2.svg" alt="npm"></a><br><a href="javascript:;" target="_blank" rel="noopener"><img src="static/picture/react-axios3.svg" alt="npm"></a></p>
<h1 id="react-axios" class="article-heading"><a href="#react-axios" class="headerlink" title="react-axios"></a>react-axios<a class="article-anchor" href="#react-axios" aria-hidden="true"></a></h1><p>适用于react框架的Axios 组件， 具有 child function callback.<br>在render阶段进行异步请求。</p>
<h2 id="Features" class="article-heading"><a href="#Features" class="headerlink" title="Features"></a>Features<a class="article-anchor" href="#Features" aria-hidden="true"></a></h2><ul>
<li>继承了axios本身具有的特性 <a href="javascript:;" target="_blank" rel="noopener">Axios</a></li>
<li>组件化</li>
<li>Child function callback <strong><em>(error, response, isLoading, onReload) =&gt; { }</em></strong></li>
<li>自动结束之前的请求</li>
<li>带有节流功能函数.</li>
<li>只在props更改和 <em>就绪</em> 状态下被调用.</li>
<li>支持 <strong><em>onSuccess</em></strong>, <strong><em>onError</em></strong>, and <strong><em>onLoading</em></strong>回调函数</li>
<li>支持自定义axios实例  <strong><em>props</em></strong> or a <strong><em>&lt;AxiosProvider … &gt;</em></strong></li>
</ul>
<!-- <a href="https://mobile.yangkeduo.com/app.html?use_reload=1&launch_url=duo_coupon_landing.html%3Fgoods_id%3D6913365198%26pid%3D10429761_141454200%26cpsSign%3DCC_200520_10429761_141454200_345ece5f7b523340c47e4863c42b30eb%26duoduo_type%3D2&campaign=ddjb&cid=launch_dl_force_" target="_blank" rel="noopener">
  <img width="300" src="https://res.cloudinary.com/dq9x329zv/image/upload/v1589976968/853a7860-8d0d-4c00-9d55-75ae4bb8e3f4_euxax7.jpg" />
</a> -->
<h2 id="安装" class="article-heading"><a href="#安装" class="headerlink" title="安装"></a>安装<a class="article-anchor" href="#安装" aria-hidden="true"></a></h2><p>使用 npm:</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npm install react-axios</span><br></pre></td></tr></table></figure>
<p>注意以下依赖的安装:</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ npm install axios</span><br><span class="line">$ npm install react</span><br><span class="line">$ npm install prop-types</span><br></pre></td></tr></table></figure>
<h2 id="组件-amp-属性" class="article-heading"><a href="#组件-amp-属性" class="headerlink" title="组件 &amp; 属性"></a>组件 &amp; 属性<a class="article-anchor" href="#组件-amp-属性" aria-hidden="true"></a></h2><h4 id="基本的-Request-组件" class="article-heading"><a href="#基本的-Request-组件" class="headerlink" title="基本的 Request 组件"></a>基本的 Request 组件<a class="article-anchor" href="#基本的-Request-组件" aria-hidden="true"></a></h4><figure class="highlight jsx"><table><tr><td class="code"><pre><span class="line">&lt;Request</span><br><span class="line">  instance=&#123;axios.create(&#123;&#125;)&#125; <span class="comment">/* custom instance of axios - optional */</span></span><br><span class="line">  method=<span class="string">""</span> <span class="comment">/* get, delete, head, post, put and patch - required */</span></span><br><span class="line">  url=<span class="string">""</span> <span class="comment">/*  url endpoint to be requested - required */</span></span><br><span class="line">  data=&#123;&#125; <span class="comment">/* post data - optional */</span></span><br><span class="line">  params=&#123;&#125; <span class="comment">/* queryString data - optional */</span></span><br><span class="line">  config=&#123;&#125; <span class="comment">/* axios config - optional */</span></span><br><span class="line">  debounce=&#123;<span class="number">200</span>&#125; <span class="comment">/* minimum time between requests events - optional */</span></span><br><span class="line">  debounceImmediate=&#123;<span class="literal">true</span>&#125; <span class="comment">/* make the request on the beginning or trailing end of debounce - optional */</span></span><br><span class="line">  isReady=&#123;<span class="literal">true</span>&#125; <span class="comment">/* can make the axios request - optional */</span></span><br><span class="line">  onSuccess=&#123;(response)=&gt;&#123;&#125;&#125; <span class="comment">/* called on success of axios request - optional */</span></span><br><span class="line">  onLoading=&#123;()=&gt;&#123;&#125;&#125; <span class="comment">/* called on start of axios request - optional */</span></span><br><span class="line">  onError=<span class="function">(<span class="params">error</span>)=&gt;</span>&#123;&#125; <span class="comment">/* called on error of axios request - optional */</span></span><br><span class="line">/&gt;</span><br></pre></td></tr></table></figure>
<h4 id="Helper组件" class="article-heading"><a href="#Helper组件" class="headerlink" title="Helper组件"></a>Helper组件<a class="article-anchor" href="#Helper组件" aria-hidden="true"></a></h4><figure class="highlight jsx"><table><tr><td class="code"><pre><span class="line">&lt;Get ... /&gt;</span><br><span class="line">&lt;Delete ... /&gt;</span><br><span class="line">&lt;Head ... /&gt;</span><br><span class="line">&lt;Post ... /&gt;</span><br><span class="line">&lt;Put ... /&gt;</span><br><span class="line">&lt;Patch ... /&gt;</span><br></pre></td></tr></table></figure>
<h2 id="例子" class="article-heading"><a href="#例子" class="headerlink" title="例子"></a>例子<a class="article-anchor" href="#例子" aria-hidden="true"></a></h2><p>包含在你的文件中<br><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; AxiosProvider, Request, Get, Delete, Head, Post, Put, Patch, withAxios &#125; <span class="keyword">from</span> <span class="string">'react-axios'</span></span><br></pre></td></tr></table></figure></p>
<p>发起一个 <code>GET</code>请求</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// Post a request for a user with a given ID</span></span><br><span class="line">render() &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;Get url=<span class="string">"/api/user"</span> params=&#123;&#123;<span class="attr">id</span>: <span class="string">"12345"</span>&#125;&#125;&gt;</span><br><span class="line">        &#123;(error, response, isLoading, onReload) =&gt; &#123;</span><br><span class="line">          <span class="keyword">if</span>(error) &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="function">(<span class="params">&lt;div&gt;Something bad happened: &#123;error.message&#125; &lt;button onClick=&#123;(</span>) =&gt;</span> onReload(&#123; <span class="attr">params</span>: &#123; <span class="attr">reload</span>: <span class="literal">true</span> &#125; &#125;)&#125;&gt;Retry&lt;<span class="regexp">/button&gt;&lt;/</span>div&gt;)</span><br><span class="line">          &#125;</span><br><span class="line">          <span class="keyword">else</span> <span class="keyword">if</span>(isLoading) &#123;</span><br><span class="line">            <span class="keyword">return</span> (<span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>Loading...<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>)</span><br><span class="line">          &#125;</span><br><span class="line">          <span class="keyword">else</span> <span class="keyword">if</span>(response !== <span class="literal">null</span>) &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="function">(<span class="params">&lt;div&gt;&#123;response.data.message&#125; &lt;button onClick=&#123;(</span>) =&gt;</span> onReload(&#123; <span class="attr">params</span>: &#123; <span class="attr">refresh</span>: <span class="literal">true</span> &#125; &#125;)&#125;&gt;Refresh&lt;<span class="regexp">/button&gt;&lt;/</span>div&gt;)</span><br><span class="line">          &#125;</span><br><span class="line">          <span class="keyword">return</span> (<span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>Default message before request is made.<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>)</span><br><span class="line">        &#125;&#125;</span><br><span class="line">      &lt;<span class="regexp">/Get&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>div&gt;</span><br><span class="line">  )</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="将属性暴露给-child-function" class="article-heading"><a href="#将属性暴露给-child-function" class="headerlink" title="将属性暴露给  child function."></a>将属性暴露给  child function.<a class="article-anchor" href="#将属性暴露给-child-function" aria-hidden="true"></a></h3><p><code>error</code> Axios返回的error对象.</p>
<p><code>response</code>  Axios的response 对象.</p>
<p><code>isLoading</code> 布尔值，表示axios是否在发送一个请求</p>
<p><code>onReload(props)</code> Function to invoke another XHR request. This function accepts new temporary props that will be overloaded with the existing props for this request only.</p>
<h2 id="自定义axios-实例" class="article-heading"><a href="#自定义axios-实例" class="headerlink" title="自定义axios 实例"></a>自定义axios 实例<a class="article-anchor" href="#自定义axios-实例" aria-hidden="true"></a></h2><p>创建一个axios 实例<br><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> axiosInstance = axios.create(&#123;</span><br><span class="line">  baseURL: <span class="string">'/api/'</span>,</span><br><span class="line">  timeout: <span class="number">2000</span>,</span><br><span class="line">  headers: &#123; <span class="string">'X-Custom-Header'</span>: <span class="string">'foobar'</span> &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></p>
<p>通过一个provider传递<br><figure class="highlight jsx"><table><tr><td class="code"><pre><span class="line">&lt;AxiosProvider instance=&#123;axiosInstance&#125;&gt;</span><br><span class="line">  &lt;Get url=<span class="string">"test"</span>&gt;</span><br><span class="line">    &#123;(error, response, isLoading, onReload) =&gt; &#123;</span><br><span class="line">      ...</span><br><span class="line">    &#125;&#125;</span><br><span class="line">  &lt;<span class="regexp">/Get&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>AxiosProvider&gt;</span><br></pre></td></tr></table></figure></p>
<p>Or 或者通过props传递<br><figure class="highlight jsx"><table><tr><td class="code"><pre><span class="line">&lt;Get url=<span class="string">"test"</span> instance=&#123;axiosInstance&#125;&gt;</span><br><span class="line">  &#123;(error, response, isLoading, onReload) =&gt; &#123;</span><br><span class="line">    ...</span><br><span class="line">  &#125;&#125;</span><br><span class="line">&lt;<span class="regexp">/Get&gt;</span></span><br></pre></td></tr></table></figure></p>
<p>Retrieve from custom provider (when you need to directly use axios).<br>The default instance will be passed if not inside an <code>&lt;AxiosProvider/&gt;</code>.<br><figure class="highlight jsx"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> MyComponent = withAxios(<span class="class"><span class="keyword">class</span> <span class="title">MyComponentImpl</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  componentWillMount() &#123;</span><br><span class="line">    <span class="keyword">this</span>.props.axios(<span class="string">'test'</span>).then(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">this</span>.setState(&#123; <span class="attr">data</span>: result.data &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">const</span> data = (<span class="keyword">this</span>.state || &#123;&#125;).data</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;JSON.stringify(data)&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">&lt;AxiosProvider instance=&#123;axiosInstance&#125;&gt;</span><br><span class="line">  &lt;MyComponent/&gt;</span><br><span class="line">&lt;<span class="regexp">/AxiosProvider&gt;</span></span><br></pre></td></tr></table></figure></p>
<div class="recommand">以下课程十分推荐想往前端架构师方向精进的同学，月入5万的梦想总要有的！投资自己就是最好的投资！</div><div class="lessonlist"><div class="lession"><a href="javascript:;" target="_blank" rel="noopener"><img src="static/picture/les01.jpeg" class="lesspic"></a></div><div class="lession"><a href="javascript:;" target="_blank" rel="noopener"><img src="static/picture/les02.jpeg" class="lesspic"></a></div><div class="lession"><a href="javascript:;" target="_blank" rel="noopener"><img src="static/picture/les03.jpeg" class="lesspic"></a></div><div class="lession"><a href="javascript:;" target="_blank" rel="noopener"><img src="static/picture/les04.jpeg" class="lesspic"></a></div></div>
              </div>
              <footer class="article-footer">
                <time class="article-footer-updated" datetime="2021-10-28T14:07:29.000Z" itemprop="dateModified">上次更新：2021-10-28</time>
                <a href="nuxtjs-axios.html" class="article-footer-prev" title="nuxtjs-axios"><i class="fa fa-chevron-left"></i><span>上一页</span></a><a href="axios-retry.html" class="article-footer-next" title="axios-retry"><span>下一页</span><i class="fa fa-chevron-right"></i></a>
              </footer>
              
            </div>
          </div>
          <aside id="article-toc" role="navigation">
            <div id="article-toc-inner">
              <strong class="sidebar-title">目录</strong>
              <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#react-axios"><span class="toc-text">react-axios</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Features"><span class="toc-text">Features</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#安装"><span class="toc-text">安装</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#组件-amp-属性"><span class="toc-text">组件 &amp; 属性</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#基本的-Request-组件"><span class="toc-text">基本的 Request 组件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Helper组件"><span class="toc-text">Helper组件</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#例子"><span class="toc-text">例子</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#将属性暴露给-child-function"><span class="toc-text">将属性暴露给  child function.</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#自定义axios-实例"><span class="toc-text">自定义axios 实例</span></a></li></ol>
              <a href="#" id="article-toc-top">回到顶部</a>
            </div>
          </aside>
        </div>
      </article>
      <aside id="sidebar" role="navigation">
  <div class="inner">
    <strong class="sidebar-title">开始使用</strong><a href="index1.html" class="sidebar-link">概述</a><strong class="sidebar-title">框架整合</strong><a href="vue-axios.html" class="sidebar-link">vue-axios</a><a href="nuxtjs-axios.html" class="sidebar-link">nuxtjs-axios</a><a href="" class="sidebar-link current">react-axios</a><strong class="sidebar-title">Plugins</strong><a href="axios-retry.html" class="sidebar-link">axios-retry</a><a href="vue-axios-plugin.html" class="sidebar-link">vue-axios-plugin</a>
  </div>
</aside>
    </div>
  </div>
</div>

    <footer id="footer" class="wrapper">
  <div class="inner">
    <div id="footer-copyright">
      &copy; 2021 axios中文网<br>
      Documentation licensed under <a href="javascript:;" target="_blank">CC BY 4.0</a>.
    </div>
    <div id="footer-links">
      <a href="javascript:;" class="footer-link" target="_blank"><i class="fa fa-twitter"></i></a>
      <a href="javascript:;" class="footer-link" target="_blank"><i class="fa fa-github-alt"></i></a>
    </div>
  </div>
</footer>

  </div>
  <div id="mobile-nav-dimmer"></div>
  <nav id="mobile-nav">
  <div id="mobile-nav-inner">
    <ul id="mobile-nav-list">
      <a href="index1.html" class="mobile-nav-link">文档</a><a href="index2.html" class="mobile-nav-link">博客</a>
      <li class="mobile-nav-item">
        <a href="javascript:;" class="mobile-nav-link" rel="external" target="_blank">GitHub</a>
      </li>
    </ul>
    
      <strong class="mobile-nav-title">开始使用</strong><a href="index1.html" class="mobile-nav-link">概述</a><strong class="mobile-nav-title">框架整合</strong><a href="vue-axios.html" class="mobile-nav-link">vue-axios</a><a href="nuxtjs-axios.html" class="mobile-nav-link">nuxtjs-axios</a><a href="" class="mobile-nav-link current">react-axios</a><strong class="mobile-nav-title">Plugins</strong><a href="axios-retry.html" class="mobile-nav-link">axios-retry</a><a href="vue-axios-plugin.html" class="mobile-nav-link">vue-axios-plugin</a>
    
  </div>
  <div id="mobile-lang-select-wrap">
    <span id="mobile-lang-select-label"><i class="fa fa-globe"></i><span>简体中文</span></span>
    <select id="mobile-lang-select" data-canonical="docs/react-axios.html">
      
        <option value="en">undefined</option>
      
        <option value="zh-cn" selected="">简体中文</option>
      
    </select>
  </div>
</nav>
  <!-- Scripts -->
<!-- build:js build/js/main.js -->

<script src="static/js/lang_select.js"></script>


<script src="static/js/toc.js"></script>


<script src="static/js/mobile_nav.js"></script>

<!-- endbuild -->

<!-- Algolia -->




<div class="popup-container">
  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.min.css">
<style>
    #magic-popup {
        color: #000;
        
    }
    .vultr-coupon {
        margin-top: 20px
    }
    .popup-container {
        visibility: hidden;
        position: relative
    }

    .coupon {
        font-size: 16px;
    }
    .desc {
        margin-top: 10px;
        color: #03a9f4;
        font-size: 16px;
    }
    .reason {
        position: absolute;
        bottom: 0;
        right: 10px;
        width: 100%;
        font-size: 12px;
        color: red
    }

    .red-packet {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #magic-popup{
        height: 200px
    }

    .campaign-tip {
        font-size: 14px;
        letter-spacing: 0
    }
</style>
<div class="popup-container">
<div id="magic-popup" class="magic-popup">
    <div class="pure-g"> 
            <a href="javascript:;" class="red-packet">
            <img width="150" src="https://res.cloudinary.com/dq9x329zv/image/upload/v1600435375/redpacket_n6cqu1.jpg">
            
            <span class="campaign-tip">拼多多新人专享红包！最高188元，限时领取！还有新人0元购，更多福利等你来拿~>></span>
            </a>
    </div>

    <!-- >
    <div class="pure-g">
            <div class="pure-u-12-24">
              <a class="pure-button pure-button-primary coupon" href="http://bit.ly/2PpdaHG" target="_blank" rel="noopener" class="btn btn-default btn-md" role="button">virmach特价vps</a>
            </div>

            <div class="pure-u-12-24">
              <a class="pure-button pure-button-primary coupon" href="http://bit.ly/2NDPn4N" target="_blank" rel="noopener" class="btn btn-default btn-md" role="button">vultr新户送$100</a>
            </div>
                
    </div>
    <div class="desc">
    vps可用来搭建博客，学习Linux，搭建个人网盘，私人git，
    可以搭建ssr一键使用google,搜索资料更方便。以上支持支付宝付款。
    </div>

    <div class="reason">
        广告费用用于支持本站服务器费用，希望大家理解
    </div> 

    <-->

    
    
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.all.js"></script>
<script src="static/js/js.cookie.min.js"></script>

<script type="text/javascript">
var result = Cookies.get('popuped');
if(result){

} else {
Cookies.set('popuped', '1', { expires: 7 })
// Swal.fire({
//   title: '<strong></strong>',
//   icon: 'info',
//   html: $('#magic-popup'),
//   focusConfirm: false,
//   confirmButtonText: '知道了'
// })
}


</script>





</body>
</html>